<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>项目管理系统</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link href="css/main.css" rel="stylesheet">
        <style type="text/css">
        .mySearch {
        margin: 10px 0px;
        }
        </style>
    </head>
    <body>
        <div id='app'>
            <!-- 顶部导航 -->
            <nav class="navbar navbar-collapse navbar-fixed-top navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="btn btn-default navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><strong>项目管理系统</strong></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        
                        <ul class="nav navbar-nav navbar-left">
                            <li><a href="#">首页</a></li>
                            <div class="btn-group" style="margin: 8px 0px;">
                                <div class="btn" type="button" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                    项目分类 <span class="caret"></span>
                                </div>
                                <ul class="dropdown-menu">
                                    <li><a href="#">自主创新</a></li>
                                    <li><a href="#">客户需求</a></li>
                                    <li><a href="#">缺陷管理</a></li>
                                </ul>
                            </div>
                            <div class="btn-group" style="margin: 8px 0px;">
                                <div class="btn" type="button" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                    事业部分类 <span class="caret"></span>
                                </div>
                                <ul class="dropdown-menu">
                                    <li v-for="ReportDepart in ReportDeparts"><a href="#">{{ReportDepart}}</a></li>
                                    
                                </ul>
                            </div>
                        </ul>
                        <form class="navbar-form navbar-left">
                            <input type="text" class="form-control" placeholder="搜索...">
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">设置</a></li>
                            <li><a href="#">用户</a></li>
                            <li><a href="#">帮助</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-2 col-md-2">
                        <h4>各科组项目列表</h4>
                        <!-- 侧边导航 -->
                        <!-- 判断科组名称 -->
                        <ul class="nav nav-sidebar" v-for="FamilyGroup in FamilyGroups">
                            <li class="active" data-toggle='collapse' data-target="#project0"><a
                                href="#">{{FamilyGroup}}<span class="sr-only"></span></a></li>
                                <!-- 判断项目是否为科组所有 -->
                                <ul id="project0" v-for="(project, idx) in projects" :key='idx'>
                                    <li class="list-unstyled" v-if="FamilyGroup==project.FamilyGroup">
                                        <a href="#" v-on:click="test(project)">{{idx}}.{{project.ProjectName}}</a>
                                    </li>
                                </ul>
                            </ul>
                        </div>
                        <!-- 主體內容 -->
                        <!-- 首頁 -->
                        <div class="col-sm-10 col-md-10 main" v-if='show==false'>
                            <h2>首頁</h2>
                            <p>這是一段測試的信息內容，用來XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                        </div>
                        <!-- 項目詳細 -->
                        <div class="col-sm-10 col-md-10 main" v-if='show'>
                            <h1 class="page-header">{{setProject.ProjectName}}</h1>
                            <h3>一、背景與目的</h3>
                            <p>{{setProject.Background}}</p>
                            <h3>二、預計實現的成效/目標</h3>
                            <p>{{setProject.Targets}}</p>
                            <h3 class="sub-header">三、项目任务分解WBS</h3>
                            <div class="table-responsive">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="checkbox" v-model="checked"
                                            @change="changeAllChecked()"></th>
                                            <th class="text-center">#</th>
                                            <th class="text-center">任務名稱</th>
                                            <th class="text-center">工時估算</th>
                                            <th class="text-center">計劃完成時間</th>
                                            <th class="text-center">實際完成時間</th>
                                            <th class="text-center">结果</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(proWBS, proWBSKey) in setProject.proWBS">
                                            <td>
                                                <input type="checkbox" :id="proWBS.wbsName" :value="proWBS.wbsName"
                                                v-model="checkedNames">
                                            </td>
                                            <td>{{proWBSKey+1}}</td>
                                            <td>{{proWBS.wbsName}}</td>
                                            <td class="text-center">{{proWBS.getTime}}</td>
                                            <td class="text-center">{{proWBS.planTime}}</td>
                                            <td class="text-center">{{proWBS.ActualTime}}</td>
                                            <td>{{proWBS.result}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script src="js/jquery-2.1.4.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/vue.js"></script>
            <!-- <script src="js/Bmob-2.2.51.min.js"></script> -->
            <script src="js/main.js"></script>
            <script>
            </script>
        </body>
    </html>